<template>
	<div style="width: 100%;height:200px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)" :id="componentModel.id">
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import utils from '@/utils/utils.js';
	export default {
		name: "HBarChartComponent",
		props: ["componentModel"],
		data() {
			return {
				myChart: null
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
			this.myChart = echarts.init(document.getElementById(this.componentModel.id));
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			setProp(prop) {
				var optionData = prop["option"];
					if (optionData != undefined) {
						var option = {
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'shadow'
								}
							},
							legend: {
								left: "right"
							},
							title: {
								text: this.componentModel.title,
								left: "center",
								subtext: this.componentModel.subtitle,
								textStyle:{
									color:this.componentModel.bigScreen?"white":"black"
								},subtextStyle:{
									color:this.componentModel.bigScreen?"white":"black"
								}
							},
							yAxis: [{
								type: 'category',
								data: optionData.category,
								axisTick: {
									alignWithLabel: true
								}
							}],
							xAxis: [{
								type: 'value'
							}],
							grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							},
						};
						var series=[];
						for(var i=0;i<optionData.series.length;i++){
							series.push({
								type: 'bar',
								name:optionData.series[i].name,
								data: optionData.series[i].value
							})
						}
						option["series"]=series;
						this.myChart.setOption(option,true);
					}else if(optionData==null){
						option = {
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'shadow'
								}
							}
						};
						this.myChart.setOption(option,true);
					}
				}
		},
	}
</script>

<style>
</style>
